<template>
<div>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="查询条件">
      <el-input v-model="findForm.search" placeholder="名称 or 组"></el-input>
    </el-form-item>
    <el-form-item label="接口状态">
      <el-select clearable v-model="findForm.state" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="接口类型">
      <el-select clearable v-model="findForm.method" placeholder="请选择">
        <el-option
          v-for="item in types"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
      <el-button type="danger" @click="add">新增</el-button>
    </el-form-item>
  </el-form>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="name"
      label="接口名称"
      width="180">
    </el-table-column>
    <el-table-column
      prop="url"
      label="接口url"
      width="280">
    </el-table-column>
    <el-table-column
      prop="state"
      width="150"
      label="状态">
    </el-table-column>
    <el-table-column
      prop="method"
      width="150"
      label="请求方式">
    </el-table-column>
    <el-table-column
      prop="team"
      width="200"
      label="所属组">
    </el-table-column>
    <el-table-column
      label="操作"
      width="150">
      <template slot-scope="scope">
        <i v-if="scope.row.state==='运行'" @click="changeState(scope.row)">封禁</i>
        <i v-else @click="changeState(scope.row)">解封</i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <i @click="edit(scope.row.id)">编辑</i>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    background
    layout="prev, pager, next"
    :total="total"
    :page-size="findForm.size"
    @current-change="handleCurrentChange"
  >
  </el-pagination>
  <AddoreditBackSecurity ref="addoreditBackSecurity" @ok="handleOk"></AddoreditBackSecurity>
</div>
</template>

<script>
import AddoreditBackSecurity from "@/components/resourceManagement/addoreditBackSecurity";
import {closeController, getAllController, openController} from "@/api/resourceMange";
export default {
  name: "backSecurity",
  components: {AddoreditBackSecurity},
  data() {
    return {
      formInline: {},
      total: undefined,
      findForm: {
        state: undefined,
        search: undefined,
        method: undefined,
        page: 1,
        size: 10
      },
      tableData: [],
      options: [{
        value: '1',
        label: '运行'
      }, {
        value: '0',
        label: '暂停'
      }],
      types: [{
        value: '查询',
        label: '查询'
      },{
        value: '更新',
        label: '更新'
      },{
        value: '添加',
        label: '添加'
      },{
        value: '删除',
        label: '删除'
      }]
    }
  },
  created() {
    this.getAllController()
  },
  methods: {
    onSubmit() {
      this.getAllController()
    },
    add() {
      this.$refs.addoreditBackSecurity.add();
    },
    handleCurrentChange(page) {
      this.findForm.page = page
    },
    changeState(row) {
      if (row.state === '运行') {
        closeController(row.id).then(res => {
          if (res.body.data) {
            this.$message.success("封禁成功")
            row.state = '暂停'
          } else {
            this.$message.error("请重新操作")
          }
        })
      }
      else {
        openController(row.id).then(res => {
          if (res.body.data) {
            this.$message.success("解禁成功")
            row.state = '运行'
          } else {
            this.$message.error("请重新操作")
          }
        })
      }
    },
    edit(id) {
      this.$refs.addoreditBackSecurity.edit(id);
    },
    handleOk() {
      this.getAllController()
    },
    getAllController() {
      getAllController(this.findForm).then(res => {
        this.tableData = res.body.data.dtos
        this.total = res.body.data.total
        for (let i=0;i<this.tableData.length;i++) {
          if (this.tableData[i].state == 1)
            this.tableData[i].state = '运行'
          else
            this.tableData[i].state = '暂停'
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
